<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>index</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<style>
    #allmap{
        width:2000px;
        height:800px;
    }
</style>
<body>
<hr>
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:200px;"></label>
            <div class="layui-form-mid layui-word-aux">
                <button id="init" class="layui-btn layui-btn-radius layui-btn-sm" type="submit">
                    初始化地图
                </button>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button id="begin" class="layui-btn layui-btn-radius layui-btn-sm" type="submit">
                    开始聚类运算
                </button>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button id="end" class="layui-btn layui-btn-disabled layui-btn-radius layui-btn-sm" type="submit">
                    停止聚类运算
                </button>
            </div>
        </div>
    </div>
</div>
<hr>

<div id="allmap" class="layui-inline"></div>

<script th:src="@{/layui/layui.all.js}"></script>
<script th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script th:src="@{/js/sockjs.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script th:src="@{/js/mapstyle.js}"></script>
<script th:src="@{/js/CurveLine.min.js}"></script>
<script>
    var map = null;

    function init() {
        //初始化地图
        initMap();
        //设置地图参数配置
        mapProperSet();
        //websocket连接
        connect();
    }

    /**
     * 初始化地图
     */
    function initMap() {
        // 创建Map实例
        map = new BMap.Map("allmap");
        //设置地图样式
        map.setMapStyle({styleJson:styleJson});
    }

    /**
     * 设置地图中心和缩放比例
     */
    function mapProperSet() {
        map.centerAndZoom("保定",13);
        //map.centerAndZoom("廊坊",13);
        //map.centerAndZoom("北京",13);
        map.enableScrollWheelZoom();
    }

    /**
     * 地图打点
     */
    function mapMark(id,lon,lat) {
        var point = new BMap.Point(lon,lat);
        var label = new BMap.Label(id,{offset:new BMap.Size(5,0)});
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.setLabel(label);
    }
    
    function mapMarkLine(data,color) {
        var point = [];
        for(var i=0;i<data.length;i++){
           if(data[i] == null){
               break;
           }
           point.push(new BMap.Point(data[i].lon,data[i].lat));
        }
        //var polyline = new BMapLib.CurveLine(point, {strokeColor:color, strokeWeight:4, strokeOpacity:0.8});
        var polyline = new BMap.Polyline(point, {strokeColor:color, strokeWeight:4, strokeOpacity:0.8});

        map.addOverlay(polyline);
    }

    //异步加载地图
    window.onload = loadJScript;

    /* --websocket-- */

    var stompClient = null;

    /**
     * 连接到websocket
     */
    function connect() {
        var socket = new SockJS('/websocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.subscribe('/topic/kmeans', function (message) {
                showGreeting(message);
            });
        });
    }

    /**
     * 关闭websocket
     */
    function disconnect() {
        if (stompClient !== null) {
            stompClient.disconnect();
        }
    }

    /**
     * 发送信息到websocket后台
     */
    function sendName(command) {
        stompClient.send("/kmeanswebsocket", {}, command);
    }

    /**
     * 将websocket返回的信息挂载到页面
     * @param message
     */
    function showGreeting(message) {
        var mess = JSON.parse(message.body);
        switch (mess.type){
            case 0:
                markPointonMap(mess.body);
                break;
            case 1:
                markLineOnMap(mess.body);
                break;
            default:
                break;
        }
    }

    /**
     * 在地图上标记点
     */
    function markPointonMap(point) {
        for(var i=0;i<point.length;i++){
            mapMark(point[i].id,point[i].lon,point[i].lat);
        }
    }

    /**
     * 在地图上打线
     */
    function markLineOnMap(data) {
        console.log(data);
        var colors = ["#FF6A6A","#E0FFFF","#D15FEE","#CAE1FF","#CD1076","#CAFF70","#BDB76B","#BCEE68","#BF3EFF","#A52A2A","#9B30FF","#8E388E","#8B1A1A","#6E8B3D","#4B0082","#458B00","#4169E1","#1E90FF","#00EE00","#0000EE","#008B45","#FFEC8B","#FF8C00","#FFE1FF","#FF34B3"];
        for(var i=0;i<data.length;i++){
            mapMarkLine(data[i],colors[i]);
        }
    }

    /**
     * 删除地图上已经存在的标记
     */
    function clearMap() {
        map.clearOverlays();
    }

    /* -- end websocket-- */

    $(function () {
        $("#init").click(function () {
            //清除地图标记
            clearMap();
            //地图打点
            sendName("0")
        });

        $("#begin").click(function () {
            //开始聚类运算
            sendName("1")
        });

        $("#end").click(function () {
            //结束聚类计算
            //sendName("-1");
        });
    });
</script>
</body>
</html>